@extends('layouts.main')

@section('content')
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <div id="app">

        <div>
            <el-table ref="table" :data="goodsMatches" style="width: 100%" border
                      @selection-change="handleTableSelectChange">
                <el-table-column type="selection" width="55" prop="is_checked "></el-table-column>
                <el-table-column prop="date" label="商品" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.pic" alt="" width=90px height=120px>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="num" label="数量" width="160">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.num" size="mini" :min="1" :step="1"
                                         @change="numChange(value)"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价" width="80"></el-table-column>
                <el-table-column prop="address" label="尺码颜色">
                    <template slot-scope="scope">
                        @{{scope.row.size}}<br> @{{scope.row.color}}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="金额" width="80">
                    <template slot-scope="scope">
                        @{{ scope.row.num*scope.row.price }}
                    </template>
                </el-table-column>


            </el-table>
        </div>

        <div>
            <br>
            <button onclick="location.href='{{route('home')}}'"
                    class="btn  btn-inverse btn-large btn-block  span2 pull-left" type="button">
                继续选购
            </button>
            <div class="alert alert-success span2"><strong>总计：</strong><span
                    id="total_price_html">@{{ totalPrice}}</span>元
            </div>

            <button type="button" id="buy" class="btn btn-inverse btn-large btn-block  span2 pull-right gwc"
                    @click="checkout">
                结算
            </button>
        </div>
    </div>


    {{--    <table class="table table-striped  text-center table-bordered table-hover table-condensed">--}}
    {{--        <thead>--}}
    {{--        <tr>--}}
    {{--            <th class="success" width="50">选择</th>--}}
    {{--            <th class="success" width="120">商品</th>--}}
    {{--            <th class="success">名称</th>--}}
    {{--            <th class="success" width="50">数量</th>--}}
    {{--            <th class="success">单价</th>--}}
    {{--            <th class="success">尺码颜色</th>--}}
    {{--            <th class="success" width="100">金额</th>--}}
    {{--        </tr>--}}
    {{--        </thead>--}}
    {{--        @foreach($goodsMatch as $goods)--}}

    {{--            <tr>--}}
    {{--                <td>--}}
    {{--                    <input type="checkbox" class="radiodx goods_check" name="" value="good1"--}}
    {{--                           {{$goods->is_checked?'checked':''}}data-id="{{$goods->id}}"></td>--}}
    {{--                <td>--}}

    {{--                    <img src="{{$goods->pic ?? ''}}" width=90px height=120px>--}}

    {{--                </td>--}}
    {{--                <td>--}}
    {{--                    {{$goods->name ?? ''}}--}}
    {{--                </td>--}}
    {{--                <td>--}}
    {{--                    <div class="num">{{$goods->num ?? ''}}</div>--}}
    {{--                </td>--}}
    {{--                <td>--}}
    {{--                    <div class="price_value">{{$goods->price ?? ''}} </div>--}}
    {{--                </td>--}}
    {{--                <td>--}}
    {{--                    {{$goods->size ?? ''}}<br>{{$goods->color ?? ''}}--}}
    {{--                </td>--}}

    {{--                <td>--}}
    {{--                    {{$goods->num*$goods->price ?? ''}}--}}
    {{--                </td>--}}

    {{--            </tr>--}}

    {{--        @endforeach--}}

    {{--    </table>--}}


@endsection

@section('scripts')
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        axios.interceptors.request.use((config) => {
            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            config.headers['X-CSRFToken'] = document.getElementsByTagName('meta')['csrf-token'].content;
            return config
        });

        new Vue({
            el: '#app',
            data: function () {
                return {
                    goodsMatches: [],
                    totalPrice: 0.00,
                    selectNum: 0,
                    selectMatch: [],
                };
            }, methods: {
                numChange(value) {
                    let data = {};
                    for (let index in this.goodsMatches) {
                        if (this.goodsMatches[index].num > 0) {
                            data[this.goodsMatches[index].goods_match_id] = this.goodsMatches[index].num;
                        }
                    }
                    axios.post('{{route('cart.store')}}', {goods_match: data}).then(function (res) {
                        if (res.data.status == '40001') {
                            alert('请登陆');
                            return;
                        }
                        if (res.data.status == '0') {
                        }
                    })
                    this.flushTotalPrice();
                },
                flushTotalPrice() {
                    let total_price = 0.0;
                    let selectNum = 0;
                    for (let index in this.selectMatch) {
                        // if (!this.goodsMatches[index].is_checked) {
                        //     continue;
                        // }
                        let num = parseInt(this.selectMatch[index].num);
                        let price = parseFloat(this.selectMatch[index].price);
                        total_price += num * price;
                        selectNum++;
                    }
                    this.selectNum = selectNum;
                    this.totalPrice = total_price;
                },
                handleTableSelectChange(row) {
                    this.selectMatch = row;
                    let ids = [];
                    for (let index in row) {
                        ids.push(row[index].id);
                    }

                    axios.post('{{route('cart.multiple_check')}}', {ids: ids}).then(function (res) {
                        if (res.data.status == '40001') {
                            alert('请登陆');
                            return;
                        }
                        if (res.data.status == '0') {
                        }
                    })
                    /* for (let index2 in this.goodsMatches) {
                         this.goodsMatches[index2].is_checked = 0;
                         for (let index1 in row) {
                             if (row[index1].id == this.goodsMatches[index2].id) {
                                 this.goodsMatches[index2].is_checked = row[index1].is_checked;
                             }
                         }
                     }*/
                    // console.log(row);
                    // console.log('dddddd');
                    this.flushTotalPrice();
                },
                checkout() {
                    if (this.selectNum > 0) {
                        location.href = '{{route('order.create')}}';
                    } else {
                        alert('请选择至少一件商品！');
                    }
                },
            }, mounted() {
                let self = this;
                axios.get('{{route('cart.list')}}').then(function (res) {
                    if (res.data.status !== 0) {
                        // self.$message('s');
                    } else {
                        self.goodsMatches = res.data.data.goodsMatch;
                        setTimeout(function () {
                            for (let index in self.goodsMatches) {
                                if (self.goodsMatches[index].is_checked > 0) {
                                    self.$refs.table.toggleRowSelection(self.goodsMatches[index], true);
                                }
                            }
                        }, 10);

                    }
                })
            }
        });
    </script>

@endsection
